<template>
  <div style="width: 100%;height: 300px;" class="flex-x flex-center">
    <div
      v-if="isChart"
      style="width: 100%;height: 300px;"
      class="chart"
      ref="chart"
    ></div>
    <div v-else>
      请完善工艺信息
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    chartData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dataKey: {
      type: Array,
      default: () => {
        return ["setTime", "setTemp"];
      }
    }
  },
  data() {
    return {
      lineChart: null
    };
  },
  computed: {
    ...mapGetters(["area123"]),
    isChart() {
      if (!this.chartData.length) {
        return false;
      }
      return this.chartData.every(
        item =>
          item[this.dataKey[0]] &&
          item[this.dataKey[1]] &&
          !isNaN(item[this.dataKey[0]]) &&
          !isNaN(item[this.dataKey[1]])
      );
    }
  },
  watch: {
    // formulaParameter: {
    //   handler: function(newData, oldData) {
    //     console.info("任务下发是否存在token", newData);
    //   },
    //   immediate: true
    // }
  },
  methods: {
    init() {
      console.log("orm.tableData :>> ", this.chartData);
      console.log("orm.tableData :>> ", this.dataKey);
      if (!this.isChart) {
        return;
      }
      //   setTime x轴
      //   setTemp y轴
      let y = [];
      let x = [];
      //   x = this.chartData.map(item => item.setTime);
      let diff = 0;
      this.chartData.forEach(item => {
        const setTime = Number(item[this.dataKey[0]]);
        x.push(setTime + diff);
        diff += setTime;
      });
      y = this.chartData.map(item => item[this.dataKey[1]]);
      // 炉子的初始的时间
      x.unshift("0");
      // 炉子的初始温度
      y.unshift(
        this.area123.meter1RealTemp ? this.area123.meter1RealTemp : "0"
      );
      console.log("y :>> ", y);
      var option = {
        grid: {
          bottom: "44"
        },
        title: {
          text: "预览工艺曲线",
          x: "center",
          textStyle: {
            fontSize: 18,
            fontWeight: "400"
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: params => {
            var str = "";
            for (var i = 0, l = params.length; i < l; i++) {
              // 小圆点
              const bgStr = `<span style='margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px;background-color:${params[i].color};'></span>`;
              let value = params[i].value;
              if (!value && String(value) !== 0) {
                value = "--";
              }

              str += bgStr + value + "℃<br />";
            }
            return params[0].axisValue + "min<br />" + str;
          }
        },
        xAxis: {
          type: "category",
          data: x,
          axisLabel: {
            formatter: val => {
              console.log("val :>> ", val);
              return `${val}min`;
            }
          }
        },
        yAxis: {
          type: "value",
          name: "℃"
        },
        series: [
          {
            data: y,
            type: "line"
          }
        ]
      };
      this.$nextTick(() => {
        if (this.lineChart) {
          this.lineChart.dispose();
          this.lineChart = null;
        }
        this.lineChart = this.$echarts.init(this.$refs.chart);

        this.lineChart.setOption(option);
      });
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss"></style>
